import { PointInterface } from "./point-related/point-interface";
import { PointStyle } from "./point-related/point-style";
import { PointBase } from "./point-related/point-base";
import { ShapeBoxBase } from "../component-model/component-related/box-base";
import { CommonUtil } from "../../../util/common-util";

const radius = 3;
const pwh = 40;
export class RotatePoint extends PointBase implements PointInterface {
    style: PointStyle;
    hasCanvas: boolean = true;
    canvasStyle: { left?: string, top?: string, width?: string, height?: string } = {
        left: "0px",
        top: "0px"
    };
    constructor(data) {
        super({
            ...data,
            pwh: pwh
        });
        this.style.border = "none";
        this.style["z-index"] -= 1;
        this.style.background = "transparent";
        this.style.lineWidth = 1;
    }
    show() {
        super.show();
    }
    move(e) {
        let divData = {
            left: CommonUtil.px2num(this.belongTo.oldStyle.left),
            top: CommonUtil.px2num(this.belongTo.oldStyle.top),
            width: CommonUtil.px2num(this.belongTo.oldStyle.width),
            height: CommonUtil.px2num(this.belongTo.oldStyle.height)
        }
        let position = this.getMovement(e);
        position.x += CommonUtil.px2num(this.oldStyle.left) + pwh / 2 - divData.width / 2 - divData.left;
        position.y += CommonUtil.px2num(this.oldStyle.top) + pwh / 2 - divData.height / 2 - divData.top;
        // console.log(position.x, position.y)
        let deg = Math.atan(position.x / -position.y);
        if (deg < 0) {
            deg += Math.PI;
        }
        if (position.x < 0) {
            deg += Math.PI;
        }
        if (deg) {
            this.belongTo.rotate({
                deg: deg
            });
        }
    }
    paint() {
        if (!this.ctx) {
            return;
        }
        super.paint(0);
        let width = this.getWidth();
        let height = this.getHeight();
        let keyPoints = [{
            left: width / 2, top: height / 2
        }]
        this.setCanvasPadding(keyPoints);

        let ctx: CanvasRenderingContext2D = this.ctx;
        ctx.translate(keyPoints[0].left, keyPoints[0].top);
        ctx.rotate(this.belongTo.style.deg);
        CommonUtil.lineWidthHandler(ctx, this.style.lineWidth);
        ctx.fillStyle = this.style.bgColor;
        ctx.strokeStyle = this.style.color;
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2);
        ctx.moveTo(0, radius);
        ctx.lineTo(0, this.pwh / 2);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
    canvasMove(e) {
        let width = this.getWidth();
        let height = this.getHeight();
        let keyPoints = [{
            left: width / 2 + CommonUtil.px2num(this.style.left), top: height / 2 + CommonUtil.px2num(this.style.top)
        }]
        this.setCanvasPadding(keyPoints);
        if (Math.pow(keyPoints[0].left - e.offsetX, 2) + Math.pow(keyPoints[0].top - e.offsetY, 2) < Math.pow(radius + 2, 2)) {
            this.boxService.cursor("url(../dist/assets/img/rotate.ico) 16 16, auto");
            return true;
        }
        return false;
    }
}